<template>
  <div>
    <div class="test" ref="carousel">
      <div :class="{'active':0===currentIndex, 'item': true}" @mouseover="change(0)" style="background: black">
        <i class="fa fa-home fa-fw fa-2x pull-right" style="color:#fff;padding:2px"></i>
      </div>
      <div :class="{'active':1===currentIndex, 'item': true}" @mouseover="change(1)"></div>
      <div :class="{'active':2===currentIndex, 'item': true}" @mouseover="change(2)"></div>
      <div :class="{'active':3===currentIndex, 'item': true}" @mouseover="change(3)"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'animateButton',
  props: {
    slideList: [Array],
    currentIndex: [Number]
  },
  mounted () {
  },
  watch: {
    'currentIndex' (newVal, oldVal) {
      let divs = this.$refs.carousel.getElementsByClassName('item')
      let div = Array.from(divs)
      div.forEach((item, index) => {
        if (index === newVal) {
          item.style.background = 'black'
          if (index === 0) {
            item.innerHTML = '<i class="fa fa-home fa-fw fa-2x pull-right" style="color:#fff;padding:2px"></i>'
          } else if (index === 1) {
            item.innerHTML = '<i class="fa fa-paper-plane fa-fw fa-2x pull-right" style="color:#fff;padding:2px"></i>'
          } else if (index === 2) {
            item.innerHTML = '<i class="fa fa-bicycle fa-fw fa-2x pull-right" style="color:#fff;padding:2px"></i>'
          } else {
            item.innerHTML = '<i class="fa fa-envelope-square fa-fw fa-2x pull-right" style="color:#fff;padding:2px"></i>'
          }
        } else {
          item.style.background = 'gray'
          item.innerHTML = ''
        }
      })
    }
  },
  data () {
    return {
    }
  },
  methods: {
    change (index) {
      this.$emit('change', index)
    }
  }
}
</script>

<style scoped>
  .test {
    position: absolute;
    top: 33%;
    right: 0;
    width: 75px;
    height: 200px;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .test .item {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 10px;
    background: rgba(0,0,0,.5);
  }
  .test .active {
    width: 43px;
    height: 43px;
  }

</style>
